import { ProForm } from "@ant-design/pro-components";
import { PlusOutlined } from '@ant-design/icons';
import { createStyles } from "antd-style";
import classNames from "classnames";
import { Col, Flex, Input, Modal, Row, Space } from "antd";
import { useEffect, useMemo, useState } from "react";
import iconsJson from '@/assets/iconsJson'
import { SvgIcon } from "../icon";
const useStyles = createStyles(({ css, token }) => {
  return {
    selectWrap: css`
    .form-icon-select-trigger{
      border: 0;
      background: none;
      color: ${token.colorPrimary};
      transition: color 0.3s;
      &:hover{
        color: ${token.colorLinkHover};
      }
    }
    
  `,
    modal: css`
    margin-bottom: 30px;
      .ant-col {
      cursor: pointer;
      text-align: center;
      padding: 10px 0;
      svg{
        transition: all .3s;
      }
      &:hover{
        svg{
          color: ${token.colorPrimary};
          transform: scale(1.5);
        }
      }
    }
    `
  }
})
const FormSelectIcon = (props) => {
  const { id, value, onChange } = props;
  const { styles } = useStyles()
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handleChange = (icon) => {
    onChange(icon)
    setIsModalOpen(false)
  }

  const isIconsJson = useMemo(() => {
    return !!iconsJson.find(d => d === value)
  }, [value])
  return (
    <div id={id} className={classNames('form-icon-select', styles.selectWrap)}>
      <Flex gap={10} align="center">
        <Input value={value} onChange={onChange} />
        {value && isIconsJson && <SvgIcon icon={value} size="22" />}
        <button style={{ flexShrink: 0 }} className="form-icon-select-trigger" type="button" onClick={() => setIsModalOpen(true)}>选择图标</button>
      </Flex>
      <Modal title={'图标选择'} open={isModalOpen} onCancel={() => setIsModalOpen(false)} okButtonProps={{ hidden: true }} onOk={() => setIsModalOpen(false)}>
        <Row className={styles.modal}>
          {iconsJson.map((icon, index) => {
            return <Col xl={3} lg={4} sm={6} key={icon} onClick={() => handleChange(icon)}> <SvgIcon icon={icon} size="22" /></Col>
          })}
        </Row>
      </Modal>
    </div >
  )
};

const ProFormIcon = (props) => {
  let { colProps = {}, fieldProps = {}, ...itemProps } = props
  return (
    <Col {...colProps}>
      <ProForm.Item {...itemProps}>
        <FormSelectIcon {...fieldProps} />
      </ProForm.Item>
    </Col>
  );
};

export default ProFormIcon;